<template>

    <div class="loginbg">

        <div class="bgform">
            <div class="logintitle">Omega云盘</div>
            <LoginForm ref="loginref" @login="tologin" :ruleForm="ruleform" v-if="status == 0" :remember="remember">
            </LoginForm>
            <RegisterForm ref="registerref" v-if="status == 1" @register="toregister" @opendialog="opendialog">
            </RegisterForm>
            <ForgetForm @opendialog="opendialog" @resetpwd="resetpwd" ref="forgerref" v-if="status == 2"></ForgetForm>

            <div style="display: flex;justify-content: space-between;" class="formbutton" v-if="status == 0">
                <div @click="forgerpassword()">忘记密码?</div>
                <div @click="register()">去注册?</div>

            </div>
            <div style="display: flex;justify-content: space-between;" class="formbutton" v-if="status == 1">
                <div @click="yyzh()">已有账号?</div>
            </div>
            <div style="display: flex;justify-content: space-between;" class="formbutton" v-if="status == 2">
                <div @click="yyzh()">去登陆?</div>
            </div>
            <div style="margin-top: 10px;">
                <el-button type="primary" @click="login()" style="width: 100%;">{{ status == 0 ? '登录' : status == 1 ?
                    '注册' : '重置密码'
                }}</el-button>
            </div>
        </div>
        <SendDialog :type="type" :sendtype="sendtype" :email="email" ref="senddialog"></SendDialog>


    </div>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import LoginForm from '@/component/LoginForm.vue';
import RegisterForm from '@/component/RegisterForm.vue';
import ForgetForm from '@/component/ForgetForm.vue';
import SendDialog from '@/component/SendDialog.vue';
import { onMounted, ref } from 'vue';
import service from '@/utils/Request';
import md5 from "js-md5";
import { useRouter } from 'vue-router';
import router from '@/router';
import cookie from '@/utils/Cookie';

const ruleform = ref({});
onMounted(() => {
    if (window.localStorage.getItem("form")) {
        ruleform.value = JSON.parse(window.localStorage.getItem("form"))
        loginref.value.getlogin()
    }
})
//0登录 1注册2.找回密码
const status = ref(0)
const type = ref("");
const senddialog = ref(null)
const forgerref = ref(null)
const loginref = ref(null)
//记住密码
const remember = ref(false);
const email = ref("");
const registerref = ref(null)
const sendtype = ref("")
const yyzh = () => {
    status.value = 0
}
const opendialog = (e) => {
    console.log(e, "eees");
    type.value = e.type;
    email.value = e.email
    sendtype.value = e.sendtype
    senddialog.value.open()
}
const forgerpassword = () => {
    status.value = 2
}

const register = () => {
    status.value = 1
}

const login = () => {
    if (status.value == 1) {
        registerref.value.validate()
    } else if (status.value == 2) {
        forgerref.value.validate()
    } else if (status.value == 0) {
        loginref.value.validate()
    }
}
const tologin = (e) => {
    console.log(e, "remem")
    if (e.remember == true) {
        if (!window.localStorage.getItem("form")) {
            e.password = md5(e.password);

            window.localStorage.setItem("form", JSON.stringify(e))

        }
        todologin(e);
    } else {
        todologin(e);
        window.localStorage.removeItem("form")
    }

}
const todologin = async (e) => {
    console.log(e, "e")
    const res = await service.post("/login", e);
    console.log(res);
    if (res.code == 0) {
        loginref.value.getsrc();
    } else {
        cookie.set("userInfo", JSON.stringify(res.data))
        router.push({
            path: "/index",
            query: {
                type: 'all'
            }
        })
    }

}
const resetpwd = async (e) => {
    if (e.password !== e.repassword) {
        ElMessage({
            type: "warning",
            message: "两次输入密码不正确"
        })
    }
    const res = await service.post("/resetPwd", e);
    console.log(res);
    if (res.code == 0) {
        forgerref.value.getsrc()
    } else {
        ElMessage({
            type: "success",
            message: "成功"
        })
        status.value = 0
    }
}

const toregister = async (e) => {
    console.log(e, "register")
    if (e.password !== e.repassword) {
        ElMessage({
            type: "warning",
            message: "两次输入密码不正确"
        })
    }
    const res = await service.post("/register", e);
    console.log(res);
    if (res.code == 0) {
        registerref.value.getsrc()
    } else {
        ElMessage({
            type: "success",
            message: "成功"
        })
        status.value = 0
    }
}
</script>
<style scoped>
.loginbg {
    width: 100%;
    height: 100%;
    background: url("../assets/login.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.bgform {
    width: 430px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    top: 30%;
    right: 11%;
    position: absolute;
    border-radius: 5px;
}

.logintitle {
    text-align: center;
    color: #000;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 20px;
}

.formbutton div {
    font-size: 14px;
    cursor: pointer;
    color: #007fff;
}
</style>